import MusclePicker from "@/components/MusclePicker";
import FormInput from "@/components/FormInput";

import { View, Text, Button } from "@tarojs/components";
import { useEffect, useState, useRef } from "react";
import { CategoryOptions, GroupOptions, ToolOptions } from "@/utils/options";
import Taro from "@tarojs/taro";
import { TMotion, TValue } from "@/types";
import "./index.less";
import { addMotion, getMotion, updateMotion } from "@/request";
import MdTrigger from "@/components/MdTrigger";
import ImageUpload from "@/components/ImageUploader";
import { PopupProvider } from "@/store/popup";
import { PickerTrigger } from "@/components/BaseTrigger";

const MotionAdd = () => {
  // const textRef = useRef<HTMLTextAreaElement>(null);
  const actionRef = useRef<string>();
  const [data, setData] = useState<TMotion>({
    category: 0,
    group: 1,
    tool: 0,
    name: "",
    mainPart: [],
    minorPart: [],
    description: "",
    img: "",
  });

  const handleChangeSelect = (name: string, value: TValue) => {
    console.log(name, value);
    const newData = { ...data };
    if (name === "category") {
      if (value === 1) {
        newData.group = 0;
      } else {
        newData.group = 1;
      }
    }
    newData[name] = value;
    setData(newData);
  };

  // 提交表单
  const handleSubmit = async () => {
    let res;
    if (actionRef.current === "add") {
      res = await addMotion(data);
    } else {
      const { canHandle, ...rest } = data;
      res = await updateMotion(rest);
    }
    if (res) {
      Taro.navigateBack();
    }
  };

  const handleGetData = async (id: string) => {
    const res: TMotion = await getMotion(id);
    setData(res);
  };

  useEffect(() => {
    const id = Taro.getCurrentInstance().router?.params?.id;
    if (id) {
      handleGetData(id);
    }
    Taro.setNavigationBarTitle({ title: id ? "编辑动作" : "添加动作" });
    actionRef.current = id ? "edit" : "add";
  }, []);

  return (
    <PopupProvider>
      <View className="motion-add">
        <View className="form-card">
          <FormInput
            label="动作名称"
            value={data.name}
            placeholder="请输入动作名称"
            onChange={handleChangeSelect.bind(null, "name")}
          />
          <PickerTrigger
            label="动作类型"
            value={data.category}
            options={CategoryOptions}
            onConfirm={(v) => handleChangeSelect("category", v)}
          />
          {data.category !== 1 && (
            <PickerTrigger
              label="训练部位"
              value={data.group}
              options={GroupOptions}
              onConfirm={(v) => handleChangeSelect("group", v)}
            />
          )}

          <PickerTrigger
            label="使用工具"
            value={data.tool}
            options={ToolOptions}
            onConfirm={(v) => handleChangeSelect("tool", v)}
          />
          <MusclePicker
            main={data.mainPart}
            minor={data.minorPart}
            onConfirm={(mainPart, minorPart) => {
              setData({
                ...data,
                mainPart: mainPart,
                minorPart: minorPart,
              });
            }}
          />
        </View>
        <View className="form-card">
          <MdTrigger
            value={data.description}
            onChange={handleChangeSelect.bind(null, "description")}
          />
        </View>
        <View className="form-card">
          <View className="form-item">
            <Text>图片</Text>
          </View>
          <ImageUpload
            className="form-item-base"
            url={data.img}
            onChange={handleChangeSelect.bind(null, "img")}
          />
        </View>

        <Button onClick={handleSubmit} className="primary-button">
          确定
        </Button>
      </View>
    </PopupProvider>
  );
};

export default MotionAdd;
